<template>
    <div>
        <el-row>
            <el-col :offset="6" :span="11">
                <ol>
                    <li v-for="problem in problems" :key="problem.id" class="hot" >
                        <span class="title" @click="details(problem.id)">{{problem.title}}</span>
                        <span class="visit">{{problem.visits}}人正在看</span>
                    </li>
                </ol>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {postRequest,getRequest} from '../utils/api.js'
export default {
    name: 'Hotproblem',

    data() {
        return {
            problems:[],
        };
    },

    mounted() {
        getRequest('/qa/problem/searchHot').then((result) => {
            if(result){
                this.problems = result;
            }
        }).catch((err) => {
            
        });
    },

    methods: {
        details(id){            
            this.$bus.$emit('problemDetails',id);
        },
    },
};
</script>

<style  scoped>
.hot{
    margin: 15px 0 15px 0;

}
.title{
    cursor: pointer;
    font-size: 22px;
    margin-right: 40px;
}
.visit{
    color:#225599;
}
</style>